<template>
  <a-modal
    :title="`分配家庭`"
    :ok-button-props="{ style: okHidden && { display: 'none' } }"
    :width="680"
    :visible="visible"
    :confirmLoading="loading"
    :maskClosable="false"
    @ok="ok"
    @cancel="() => { $emit('cancel') }">
    <a-spin :spinning="loading">
      <a-form :form="form" v-bind="formLayout">
        <a-form-item label="村列表">
          <a-select @change="handleChange" v-model="moren">
            <a-select-option v-for="(item, index) in villList" :key="index" :value="item.village_id">
              {{ item.village_name }}
            </a-select-option>
          </a-select>
        </a-form-item>
        <a-form-item label="选择家庭">
          <a-select label-in-value @change="handleChange2" :filterOption="filterOption" @search="onsearch" show-search>
            <a-select-option v-for="(item, index) in famiList" :key="index" :value="item.family_id">
              {{ item.fullname }}
            </a-select-option>
          </a-select>
        </a-form-item>
      </a-form>
    </a-spin>
  </a-modal>
</template>

<script>
  import { familyList, villageList, distribution } from '@/api/distribution'

  export default {
    props: {
      visible: {
        type: Boolean,
        required: true
      },
      loading: {
        type: Boolean,
        default: () => false
      },
      okHidden: {
        type: Boolean,
        default: () => false
      },
      model: {
        type: Object,
        default: () => null
      }
    },
    data () {
      this.formLayout = {
        labelCol: {
          xs: {
            span: 24
          },
          sm: {
            span: 4
          }
        },
        wrapperCol: {
          xs: {
            span: 24
          },
          sm: {
            span: 19
          }
        }
      }
      return {
        form: this.$form.createForm(this),
        currentLength: 0,
        fullname: '',
        village_id: '',
        family_id: '',
        villList: [],
        famiList: [],
        moren: ''
      }
    },
    created () {
      villageList().then((res) => {
        this.villList = res.list
        this.moren = this.model.village_id || ''

        if (this.moren != '') {
          this.village_id = this.moren
          this.onsearch('')
        }
      })
    },
    methods: {
      filterOption (value, option) {
        return option.componentOptions.children[0].text.indexOf(value) >= 0
      },
      onsearch (input, option) {
        if (this.village_id == '') {
          this.$message.error('请先选择村庄')
          return
        }
        console.log(this.moren)
        familyList({ fullname: input, village_id: this.village_id || this.moren }).then((res) => {
          console.log(res)
          this.famiList = res.list
        })
      },
      handleChange2 (e) {
        console.log('家庭列表', e)
        this.family_id = e.key
      },
      handleChange (e) {
        this.village_id = e.key
      },
      onSelect () {
        console.log('你好')
      },
      ok () {
        const success = (res, info) => {
          if (res.is_ok == 'Y') {
            this.$emit('refresh')
            this.$message.info(info)
          }
        }
        const final = () => { this.confirmLoading = false }
        distribution({ family_id: this.family_id, village_id: this.village_id || this.moren, log_id: this.model.log_id })
          .then(res => success(res, '分配成功'))
          .finally(final)
      }
    },
    components: {
    }
  }
</script>

<style scoped>
  >>>.ant-upload.ant-upload-select-picture-card {
    margin-bottom: 0
  }

  >>>.clearfix {
    height: 110px
  }

  >>>.remove70 {
    margin-bottom: 110px !important;
    height: 300px !important;
  }

  .htm {
    min-height: 40px;
    max-height: 350px;
    overflow-y: scroll;
    width: 100%;
    border: 1px solid #eee
  }
</style>
